<template>
    <div class="main-container">
      <div class="statistic-section">
        <h2>销售统计</h2>
        <div class="table-wrapper">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>销售周期</th>
                <th>销售额(元)</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(sale, index) in salesData" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ sale.saleCycle }}</td>
                <td>{{ sale.saleAmount }}</td>
                <td>
                  <button @click="editSale(index)">编辑</button>
                  <button @click="deleteSale(index)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <button @click="addSale">添加销售记录</button>
        </div>
      </div>
      <div class="statistic-section">
        <h2>按电影统计</h2>
        <div class="table-wrapper">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>电影名</th>
                <th>售票量</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(movie, index) in movieData" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ movie.movieName }}</td>
                <td>{{ movie.ticketSold }}</td>
                <td>
                  <button @click="editMovie(index)">编辑</button>
                  <button @click="deleteMovie(index)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <button @click="addMovie">添加电影统计记录</button>
        </div>
      </div>
      <div class="statistic-section">
        <h2>按放映厅统计</h2>
        <div class="table-wrapper">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>放映厅号</th>
                <th>使用频率</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(hall, index) in hallData" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ hall.hallNumber }}</td>
                <td>{{ hall.usageFrequency }}</td>
                <td>
                  <button @click="editHall(index)">编辑</button>
                  <button @click="deleteHall(index)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <button @click="addHall">添加放映厅统计记录</button>
        </div>
      </div>
      <div class="statistic-section">
        <h2>按日期统计</h2>
        <div class="table-wrapper">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>日期</th>
                <th>观众人数</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(date, index) in dateData" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ date.dateValue }}</td>
                <td>{{ date.audience }}</td>
                <td>
                  <button @click="editDate(index)">编辑</button>
                  <button @click="deleteDate(index)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <button @click="addDate">添加日期统计记录</button>
        </div>
      </div>
      <div class="statistic-section">
        <h2>观众统计</h2>
        <div>
          <h3>观众总人数: {{ totalAudience }}</h3>
        </div>
        <div>
          <h3>观众年龄分布</h3>
          <ul>
            <li v-for="(age, index) in ageDistribution" :key="index">
              <span>{{ age.ageRange }}</span> - {{ age.count }}人
              <button @click="editAge(index)">编辑</button>
              <button @click="deleteAge(index)">删除</button>
            </li>
          </ul>
          <button @click="addAge">添加年龄分布记录</button>
        </div>
        <div>
          <h3>观众性别分布</h3>
          <ul>
            <li>
              <span>男性: </span> {{ genderDistribution.male }}人
              <button @click="editMale()">编辑</button>
            </li>
            <li>
              <span>女性: </span> {{ genderDistribution.female }}人
              <button @click="editFemale()">编辑</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
    const salesData = ref([
    { saleCycle: '2024-09-01 - 2024-09-10', saleAmount: 35000 },
    { saleCycle: '2024-09-11 - 2024-09-20', saleAmount: 42000 },
  ]);
  const movieData = ref([
    { movieName: '毒液：最后一舞', ticketSold: 180 },
    { movieName: '爱你很久很久', ticketSold: 150 },
    { movieName: '志愿军：存亡之战', ticketSold: 160 }
  ]);
  const hallData = ref([
    { hallNumber: '1号厅', usageFrequency: 25 },
    { hallNumber: '2号厅', usageFrequency: 20 },
    { hallNumber: '3号厅', usageFrequency: 35 },
  ]);
  const dateData = ref([
    { dateValue: '2024-09-01', audience: 80 },
    { dateValue: '2024-09-2', audience: 95 },
    { dateValue: '2024-09-3', audience: 70 },
    { dateValue: '2024-09-4', audience: 85 },
    { dateValue: '2024-09-5', audience: 55 },
    { dateValue: '2024-09-6', audience: 85 },
    { dateValue: '2024-09-7', audience: 93 },
    { dateValue: '2024-09-8', audience: 75 },
    { dateValue: '2024-09-9', audience: 95 },
    { dateValue: '2024-09-10', audience: 88 },
  ]);
  const totalAudience = ref(500);
  const ageDistribution = ref([
    { ageRange: '儿童(0 - 12岁)', count: 80 },
    { ageRange: '青少年(13 - 19岁)', count: 120 },
    { ageRange: '青年(20 - 30岁)', count: 150 },
    { ageRange: '中年(31 - 50岁)', count: 100 },
    { ageRange: '老年(51岁及以上)', count: 50 },
  ]);
  const genderDistribution = ref({ male: 260, female: 240 });
  
  const addSale = () => {
    salesData.value.push({ saleCycle: '新周期', saleAmount: 0 });
  };
  const editSale = (index) => {
    const newCycle = prompt('输入新的销售周期', salesData.value[index].saleCycle);
    const newAmount = parseInt(prompt('输入新的销售额', salesData.value[index].saleAmount));
    if (newCycle && newAmount) {
      salesData.value[index].saleCycle = newCycle;
      salesData.value[index].saleAmount = newAmount;
    }
  };
  const deleteSale = (index) => {
    salesData.value.splice(index, 1);
  };
  
  const addMovie = () => {
    movieData.value.push({ movieName: '新电影', ticketSold: 0 });
  };
  const editMovie = (index) => {
    const newName = prompt('输入新的电影名', movieData.value[index].movieName);
    const newTickets = parseInt(prompt('输入新的售票量', movieData.value[index].ticketSold));
    if (newName && newTickets) {
      movieData.value[index].movieName = newName;
      movieData.value[index].ticketSold = newTickets;
    }
  };
  const deleteMovie = (index) => {
    movieData.value.splice(index, 1);
  };
  
  const addHall = () => {
    hallData.value.push({ hallNumber: '新放映厅', usageFrequency: 0 });
  };
  const editHall = (index) => {
    const newNumber = prompt('输入新的放映厅号', hallData.value[index].hallNumber);
    const newFrequency = parseInt(prompt('输入新的使用频率', hallData.value[index].usageFrequency));
    if (newNumber && newFrequency) {
      hallData.value[index].hallNumber = newNumber;
      hallData.value[index].usageFrequency = newFrequency;
    }
  };
  const deleteHall = (index) => {
    hallData.value.splice(index, 1);
  };
  
  const addDate = () => {
    dateData.value.push({ dateValue: '新日期', audience: 0 });
  };
  const editDate = (index) => {
    const newDate = prompt('输入新的日期', dateData.value[index].dateValue);
    const newAudience = parseInt(prompt('输入新的观众人数', dateData.value[index].audience));
    if (newDate && newAudience) {
      dateData.value[index].dateValue = newDate;
      dateData.value[index].audience = newAudience;
    }
  };
  const deleteDate = (index) => {
    dateData.value.splice(index, 1);
  };
  
  const addAge = () => {
    ageDistribution.value.push({ ageRange: '新年龄范围', count: 0 });
  };
  const editAge = (index) => {
    const newRange = prompt('输入新的年龄范围', ageDistribution.value[index].ageRange);
    const newCount = parseInt(prompt('输入新的人数', ageDistribution.value[index].count));
    if (newRange && newCount) {
      ageDistribution.value[index].ageRange = newRange;
      ageDistribution.value[index].count = newCount;
    }
  };
  const deleteAge = (index) => {
    ageDistribution.value.splice(index, 1);
  };
  
  const editMale = () => {
    const newMaleCount = parseInt(prompt('输入新的男性人数', genderDistribution.value.male));
    if (newMaleCount) {
      genderDistribution.value.male = newMaleCount;
    }
  };
  const editFemale = () => {
    const newFemaleCount = parseInt(prompt('输入新的女性人数', genderDistribution.value.female));
    if (newFemaleCount) {
      genderDistribution.value.female = newFemaleCount;
    }
  };
  </script>
  
  <style scoped>
  .main-container {
  padding: 20px;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f8f9fa;
}

.statistic-section {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 80%;
  margin-bottom: 30px;
  padding: 30px;
  transition: transform 0.2s ease-in-out;
}

.statistic-section:hover {
  transform: translateY(-5px);
}

h2 {
  margin-top: 0;
  color: #333;
  font-size: 24px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 10px;
}

.table-wrapper {
  overflow-x: auto;
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  min-width: 600px;
}

th,
td {
  border: 1px solid #ccc;
  padding: 12px 15px;
  text-align: center;
}

th {
  background-color: #f0f0f0;
  color: #555;
  font-weight: bold;
}

td {
  color: #666;
}

button {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

li {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

li:hover {
  background-color: #f9f9f9;
}

span {
  font-size: 16px;
}

button.edit-button {
  background-color: #28a745;
}

button.edit-button:hover {
  background-color: #218838;
}

button.delete-button {
  background-color: #dc3545;
}

button.delete-button:hover {
  background-color: #c82333;
}
  </style>